<script setup lang="ts">
interface DataType {
  id: number;
  date: string;
  description: string;
  src: string;
}

const props = defineProps({
  purchaseProductionId: Number
});

const url =
  'https://img2.baidu.com/it/u=1423908296,3146451520&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800';

const datas: Array<DataType> = [
  {
    date: '2024-12-09',
    description: '开工',
    src: url,
    id: 1
  },
  {
    date: '2024-12-09',
    description: '冶炼',
    src: url,
    id: 2
  },
  {
    date: '2024-12-09',
    description: '机加工',
    src: url,
    id: 3
  },
  {
    date: '2024-12-09',
    description: '包装',
    src: url,
    id: 4
  }
];

const itemData = reactive<{ id: number; date?: string; description?: string }>({
  id: 0
});

const updateItem = (item: DataType) => {
  itemData.id = item.id;
  itemData.date = item.date;
  itemData.description = item.description;
};
</script>
<template>
  <el-form :model="itemData">
    <el-row :gutter="20">
      <el-col>
        <el-form-item label="id" prop="requiredDate" v-show="true">
          <el-input v-model="itemData.id" readonly />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="日期" prop="requiredDate" style="width: 100%">
          <el-date-picker
            v-model="itemData.date"
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="18">
        <el-form-item label="描述" prop="requiredDate">
          <el-input v-model="itemData.description" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-button type="primary" style="width: 100%">
      <span v-if="itemData.id === 0">新增</span>
      <span v-else>修改</span>
    </el-button>
  </el-form>
  <el-timeline>
    <el-timeline-item
      placement="top"
      v-for="value in datas"
      :key="value.id"
      :timestamp="value.date + ' ' + value.description"
      type="success"
    >
      <div class="image-container">
        <div class="image-container-button">
          <el-button @click="updateItem(value)">修改内容</el-button>
          <el-button @click="updateItem(value)">删除节点</el-button>
          <el-button @click="updateItem(value)">删除图片</el-button>
        </div>
        <div class="image-container-image"><el-image fit="contain" :src="value.src" /></div>
      </div>
    </el-timeline-item>
  </el-timeline>
</template>

<style lang="scss">
.el-timeline-item__timestamp {
  font-size: 1.5rem;
}
</style>
<style scoped lang="scss">
.el-image {
  max-height: 800px;
  margin: 5px;
  box-sizing: border-box;
  border-radius: 20px;
  :hover {
    border: 1px solid red;
  }
}
</style>
